<template>
    <div>
        <el-dialog
            v-dialog-drag
            @close="closeAddCustomerRelationship"
            :before-close="handleClose"
            title="Add Customer Relationship"
            :visible.sync="visible"
            >
            <el-form ref="addCustomerRelationshipForm" :model="addCustomerRelationshipForm"
                     :rules="addCustomerRelationshipRules" size="medium" label-width="100px"
                     label-position="left">
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="customerId" prop="customerId">
                            <el-input v-model="customer.customerId" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="customerName" prop="customerName">
                            <el-input v-model="customer.customerName" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="relativeCustomerId" prop="relativeCustomerId2">
                            <el-input v-model="addCustomerRelationshipForm.relativeCustomerId2" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="120px" label="relativeCustomerName" prop="relativeCustomerName">
                            <el-select v-model="addCustomerRelationshipForm.relativeCustomerName"
                                       placeholder="Please choose related customer"
                                       filterable
                                       clearable
                                       value-key="customerId"
                                       @change="onSelectCustomer"
                                       :style="{width: '100%'}">
                                <el-option v-for="(item, index) in options.relativeCustomerNameOptions"
                                           :key="index"
                                           :label="item.label"
                                           :value="item.value"
                                           :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40" type="flex" justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="customerRelationId" prop="customerRelationId">
                            <el-input v-model="addCustomerRelationshipForm.customerRelationId" :disabled='true'
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label-width="120px" label="customerRelationName" prop="customerRelationName">
                            <el-select v-model="addCustomerRelationshipForm.customerRelationName"
                                       placeholder="Please choose customer relationship"
                                       filterable clearable
                                       value-key="id"
                                       @change="onSelectRelation"
                                       :style="{width: '100%'}">
                                <el-option v-for="(item) in options.customerRelationNameOptions" :key="item.id"
                                           :label="item.label" :value="item.id"
                                           :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="resetAddCustomerRelationship">Cancel</el-button>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium"
                           @click="handleAddCustomerRelationship">Add
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "addCustomerRelationshipDialog",
    props: ['visible', 'onClose', 'callback', 'options', 'customer'],
    data() {
        return {
            addCustomerRelationshipForm: {
                relativeCustomer: undefined,
                relativeCustomerId2: undefined,
                relativeCustomerName: undefined,
                customerRelationId: undefined,
                customerRelationName: "",
                addRelatedCustomer: undefined,
            },
            addCustomerRelationshipRules: {
                relativeCustomerName: [{
                    required: true,
                    message: 'Please choose related customer',
                    trigger: 'change'
                }],
                customerRelationName: [{
                    required: true,
                    message: 'Please choose customer relationship',
                    trigger: 'change'
                }],
            },

        }
    },
    methods: {
        init() {
            this.$axios.post(
                '/customer/customer/queryAllCustomer'
            ).then(res => {
                this.options.relativeCustomerNameOptions = [];
                for (var i = 0; i < res.data.obj.length; i++) {
                    var item = {"label": "", "value": ""}
                    item.label = res.data.obj[i].customerName
                    item.value = res.data.obj[i].customerId
                    this.options.relativeCustomerNameOptions.push(item)
                }
                console.log(this.options.relativeCustomerNameOptions)
            });

        },

        closeAddCustomerRelationship() {
            this.onClose();
        },
        handleAddCustomerRelationship() {
            this.$refs['addCustomerRelationshipForm'].validate(valid => {
                if (!valid) return


                //获取label
                let obj = {};
                obj = this.options.customerRelationNameOptions.find((item)=>{
                    return item.id === this.addCustomerRelationshipForm.customerRelationId;
                });
                let getLabel = ''
                getLabel = obj.label;
                //处理返回的数据
                var dd = {
                    relativeCustomerId2: this.addCustomerRelationshipForm.relativeCustomerId2,
                    relativeCustomerName: this.addCustomerRelationshipForm.relativeCustomerName,
                    customerRelationId: this.addCustomerRelationshipForm.customerRelationId,
                    customerRelationName: getLabel
                }
                this.callback(dd)
                this.$refs['addCustomerRelationshipForm'].resetFields();
                this.closeAddCustomerRelationship()
                this.$message.success("Add success!")

            })
        },
        resetAddCustomerRelationship() {
            this.$refs['addCustomerRelationshipForm'].resetFields();
            this.closeAddCustomerRelationship()
        },
        handleClose() {
            this.$refs['addCustomerRelationshipForm'].resetFields();
            this.closeAddCustomerRelationship()
        },
        onSelectCustomer(value) {
            this.addCustomerRelationshipForm.relativeCustomerId2 = value
        },
        onSelectRelation(value) {
            this.addCustomerRelationshipForm.customerRelationId = value
        }

    }

}
</script>

<style scoped>

</style>